<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <title>忘记密码</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10"/>
    <!--[if lte IE 8]><script src="public/libs/jquery/flot/excanvas.min.js"></script><![endif]-->
	<!--[if lt IE 9]><script src="public/libs/html5/html5shiv.js"></script><![endif]-->
	<style type="text/css">
	body{
		min-width: 988px;
		overflow: hidden;
	}
	.middle{
		width: 760px;
		height: 500px;
		margin: auto;
		/* border: 1px solid #eaeaea; */
		z-index:50;
	}
	.content{
		width:99.9%;
		height: 99.9%;
		position: absolute;
		left:0px;
		top:0px;
		z-index: 50;
		min-width: 988px;
	}
	.header{
		width:100%;
		height:60px;
		position: absolute;
		background-color: #F54339;
		top: 0px;
		left: 0px;
	}
	.zhxyLogo{
		position:absolute;
		width:423px;
		height:37px;
		top:13px;
		left:30px;
		background-image:url(img/login/logo.png);
		background-repeat:no-repeat;
	}
	.logo-content{
		width: 275px;
		height: 400px;
		float: left;
	}
	.logo2{
		width: 275px;
		height: 320px;
		float: left;
	}
	.logo3{
		width: 275px;
		height: 60px;
		float: left;
		margin-top: 19px;
	}
	.loginBtn{
		display: inline-block;
	    width: 300px;
	    height: 45px;
	    line-height: 45px;
	    text-align: center;
	    cursor: pointer;
	    text-decoration: none;
	    color: #fff;
	    background-color: #32A5E7;
	    font-size: 17px;
	   	margin-top: 20px;
	    font-family: 微软雅黑;
	}
	.logo9{
		display:inline-block;
		width:240px;
		height:38px;
		line-height:38px;
		text-align:center;
		text-decoration:none;		
		color:#fff;
		background:url(img/resizepwd.png) no-repeat;
		font-size:18px;
		margin-left:120px; 
		font-family: 微软雅黑;
	}
	.loginBtn:hover{			
		background-color:#F54339;
	}
	.forgetPwd{
		float:right;
		height:20px;
		text-decoration:none;
		color:#00a7ea;
		cursor:pointer;
		margin-top:5px;
	}
	.forgetPwd:hover{
		color:#008ec7;
	}
	.footer{
		position:absolute;
		width:100%;
		height:45px;
		border-top:4px solid #ccc;
		line-height: 45px;
		bottom: 0px;
		left: 0px;
		color: #484848;
		text-align: center;
		font-size: 12px;
	}
	.back-img1{
		z-index:10;
		width: 180px;
		height: 200px;
		position: absolute;
		left: 30px;
		top:75px;
	}
	.back-img2{
		z-index:10;
		width: 180px;
		height: 200px;
		position: absolute;
		right: 30px;
		top:75px;
	}
	.back-img3{
		z-index:10;
		width: 180px;
		height: 200px;
		position: absolute;
		left: 30px;
		bottom:60px;
	}
	.back-img4{
		z-index:10;
		width: 180px;
		height: 200px;
		position: absolute;
		right: 30px;
		bottom:60px;
	}
	.sm.txt{
		height:24px;
		padding:6px 9px;
	}
	.txt{
		width:280px;
		height:38px;
		padding:8px 9px;
		border: 1px solid #eaeaea;
		font-size:14px;
		line-height:18px;
	}
	.table-left{
		text-align:right;
		font-size:14px;
	}
	.check-fail{
		width:130px;
		font-size:12px;
		color:red;
	}
	.bg-frame {
	    height: 100%;
	    left: 0;
	    position: absolute;
	    top: 0;
	    width: 100%;
	    z-index: -1;
	    border: 0px solid #fff;
	}
	.getcode{
		display:inline-block;
		width:110px;
		height:37px;
		line-height:37px;
		text-align:center;
		cursor:pointer;
		text-decoration:none;		
		color:#fff;
		background-color:#32A5E7;
		font-size:13px;
		font-family: 微软雅黑;
	}
	.getcode:hover{
		background-color:#F54339;
	}
	.getcode-dis{
		display:inline-block;
		width:110px;
		height:37px;
		line-height:37px;
		text-align:center;
		cursor:pointer;
		text-decoration:none;		
		font-size:13px;
		font-family: 微软雅黑;
		background-color:#E5E5E5;
		color: #464646;
	}
	.loginType{
		width:342px;
		height:20px;
		line-height:20px;
		margin-bottom:30px;
		color: #747474;
		font-family: 微软雅黑;
	}
	.loginType input{
		width:12px;
		height:12px;
		margin:8px;
	}
	.user-role-check{
		cursor: pointer;
		font-size: 13px;
	}
	#waitTime{
		display: inline-block;
		margin: 0 5px;
		font-size: 14px;
		color: red;
	}
  </style>
	<script type="text/javascript" src="public/libs/jquery/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="public/libs/JSON/json2.js"></script>
	<script type="text/javascript" src="public/js/config.js"></script>
	<script type="text/javascript" src="public/js/ajax-crud.js"></script>
	<script type="text/javascript" src="public/libs/jquery/jquery-lhgdialog/lhgdialog.min.js?self=true&skin=idialog"></script>
	<script type="text/javascript" src="public/js/home-common.js"></script>
	<script type="text/javascript" src="public/js/check.js"></script>
	
	<script type="text/javascript">
		
	 	var serverUrl = QualityCheck.GPUD.ServiceConfig;
		var AjaxCrud = QualityCheck.AjaxCRUD;
		$(function(){
			initbtn();
			initPage();
			window.onresize = function () {
				initPage();
			};
		});
		function initbtn(){			
			$("#usercode").bind({
	    		blur:function(){
					var cp = $("#usercode").val();
	   				if(cp == ""){
						$("#user-usercode-ex").text("手机号不能为空！");
					}else{
		   				if((/^13\d{9}$/.test(cp))||(/^15[^4]\d{8}$/.test(cp))||(/^17\d{9}$/.test(cp))||(/^18\d{9}$/.test(cp))){
							$("#user-usercode-ex").html("");
						}else{
							$("#user-usercode-ex").text("请输入正确的手机号！");
						}
					}
		    	},
		    	focus:function(){
		    		$("#user-usercode-ex").html(""); 
		    	}
    		});    		
    		$("#pword").bind({
	    		blur:function(){
	   				if($("#pword").val() == ""){
						$("#user-pword-ex").text("密码不能为空！");
					}
		    	},
		    	focus:function(){
		    		$("#user-pword-ex").html(""); 
		    	}
    		});
    		$("#confirmpword").bind({
	    		blur:function(){
	   				if($("#confirmpword").val() == ""){
						$("#user-confirmpword-ex").text("确认密码不能为空！");
					}
		    	},
		    	focus:function(){
		    		$("#user-confirmpword-ex").html(""); 
		    	}
    		});
    		$("#identifycode").bind({
	    		blur:function(){
	   				if($("#identifycode").val() == ""){
						$("#user-identifycode-ex").text("验证码不能为空！");
					}
		    	},
		    	focus:function(){
		    		$("#user-identifycode-ex").html(""); 
		    	}
    		});
    		$("#getcode").unbind("click");
    		$("#getcode").bind("click",function(){
    			if(check3()){
					getCode();
				}
    		});
			$("#nextBtn").unbind("click");
			$("#nextBtn").click(function(){
				if(check1()){
					checkCode();
				}
			});
			$("#loginBtn").unbind("click");
			$("#loginBtn").click(function(){
				if(check2()){
					updateInfo();
				}
			});
			$(".user-role-check").click(function(){
				var checkRole = $("input[name=\"loginType\"]");
				for(var i = 0; i < checkRole.length; i++){
					checkRole[i].checked = false;
				}
				if($(this).text() == "教师"){
					checkRole[1].checked = true;
				}else if($(this).text() == "家长"){
					checkRole[0].checked = true;
				}else if($(this).text() == "校管理员"){
					checkRole[2].checked = true;
				}
				$("input[name=\"loginType\"]").change();
			});		
		}
		function check1(){
			if($("#usercode").val() == ""){
				$("#user-usercode-ex").text("手机号不能为空！");
				return false;
			}else if($("#identifycode").val() == ""){
				$("#user-identifycode-ex").text("验证码不能为空！");
				return false;
			}else{
				return true;
			}
		}
		function check2(){
			if($("#pword").val() == ""){
				$("#user-pword-ex").text("密码不能为空！");
				return false;
			}else if($("#confirmpword").val() == ""){
				$("#user-confirmpword-ex").text("确认密码不能为空！");
				return false;
			}else if($("#pword").val() != $("#confirmpword").val()){
				$("#user-confirmpword-ex").text("两次密码不一致！");
				return false;
			}else{
				return true;
			}
		}
		function check3(){
			if($("#usercode").val() == ""){
				$("#user-usercode-ex").text("手机号不能为空！");
				return false;
			}else{
				return true;
			}
		}
		var timer = null;
		var wait = 60;
		function doLoop(){
			wait -- ;
			if(wait >= 0){
				$("#waitTime").html(wait);
			}else{
				window.clearInterval(timer);
				$("#getcodedis").hide();
				$("#getcode").show();
			}
		}
		
		function getCode(){
			$("#getcode").hide();
			$("#getcodedis").show();
			wait = 60;
			$("#waitTime").html(wait);
			timer = window.setInterval(doLoop, 1000);
			var usercode = $("#usercode").val();
			var usertype = $("input[name=\"loginType\"]:checked").val();
			var data = {
					cmd:"phoneVerification",
					model:"user",
					data:{
						usercode:usercode,
						usertype:usertype,
					},
					remark:""					
			};
			//processBegin("正在获取中···");
			QualityCheck.AjaxCRUD.get(QualityCheck.GPUD.ServiceConfig.ServerLoginUrl,data,function(res){
				if(res.error==""){			
					//processEnd("获取成功！");
				}else{
					//processError("请检查手机号是否有效！");
				}
			},null,null);	
		}
		function checkCode(){
			var usercode = $("#usercode").val();
			var identifycode = $("#identifycode").val();
			var data = {
					cmd:"codeVerification",
					model:"user",
					data:{
						usercode:usercode,
						code:identifycode,
					},
					remark:""					
			};
			QualityCheck.AjaxCRUD.get(QualityCheck.GPUD.ServiceConfig.ServerLoginUrl,data,function(res){
				if(res.error==""){	
					$(".info-table").hide();
					$(".loginBtn").hide();
					$("#table2").show();
					$("#loginBtn").show();
					$(".logo9").html("重置密码");
				}else{
					processError("验证码输入错误，请重新输入！");
				}
			},null,null);	
		}
		function updateInfo(){
			var usercode = $("#usercode").val();
			var pword = $("#pword").val();
			var usertype = $("input[name=\"loginType\"]:checked").val();
			var data = {
					cmd:"resetPassword",
					model:"user",
					data:{
						usercode:usercode,
						usertype:usertype,
						password:pword,
					},
					remark:""					
			};
			processBegin("正在保存中···");
			QualityCheck.AjaxCRUD.get(QualityCheck.GPUD.ServiceConfig.ServerLoginUrl,data,function(res){
				if(res.error==""){
					processEnd("修改密码成功！");
				}else{
					processError("你的密码有误，请重新再试！");
				}
			},null,null);	
		}
		function initPage(){
			var winH = document.documentElement.clientHeight || document.body.clientHeight;
			var topM = (winH - $(".middle").height())/2;
			$(".middle").css("margin-top",topM + "px");
		}
	</script>
  </head>
  <body>
  <div class="content">
	<div class="header">
		<div class="zhxyLogo"></div>
	</div>
	<div class="back-img1">
		<img src="img/login/left.png" width="100%" height="100%">
	</div>
	<div class="back-img2">
		<img src="img/login/right.png" width="100%" height="100%">
	</div>
	<div class="back-img3">
		<img src="img/login/left.png" width="100%" height="100%">
	</div>
	<div class="back-img4">
		<img src="img/login/right.png" width="100%" height="100%">
	</div>
	<div class="middle">
		<div>
			<p class="logo9">账号验证</p>
		</div>
		<table class="info-table" style="margin-left:23%;" id="table1">
			<tr style="height:60px;">
				<td class="table-left"><font color="red">*</font> 用户类型：</td>
				<td class="table-middle">
					<input type="radio" id="loginType-parent" name="loginType" value="1" checked="checked"/><span class="user-role-check">家长</span>		
					<input type="radio" id="loginType-teacher" name="loginType" value="2"/><span class="user-role-check">教师</span>	
					<input type="radio" id="loginType-manager" name="loginType" value="0"/><span class="user-role-check">校管理员</span>	 
				</td>
				<td class="table-right">
					<span class="check-fail" id="user-usertype-ex"></span>
				</td>
			</tr>
			<tr style="height:60px;">
				<td class="table-left"><font color="red">*</font> 手机号：</td>
				<td class="table-middle">
					<input type="text" class="txt sm" id="usercode" placeholder="请您输入手机号"/>
				</td>
				<td class="table-right">
					<span class="check-fail" id="user-usercode-ex"></span>
				</td>
			</tr>
			<tr style="height:60px;">
				<td class="table-left"><font color="red">*</font> 验证码：</td>
				<td class="table-middle">
					<input type="text"  class="txt sm" id="identifycode" style="width:160px;" placeholder="请输入验证码"/>
					<a class="getcode" id="getcode">获取手机验证码</a>
					<a class="getcode-dis" id="getcodedis" style="display:none;">重新获取（<span id="waitTime">60</span>）</a>
				</td>
				<td class="table-right">
					<span class="check-fail" id="user-identifycode-ex"></span>
				</td>
			</tr>
			<tr style="height:60px;">
				<td class="table-left"></td>
				<td class="table-middle">
					<a class="loginBtn" id="nextBtn">下一步</a>
				</td>
				<td class="table-right">
					<span class="check-fail"></span>
				</td>
			</tr>
		</table>
		<table class="info-table" style="margin-left:23%;display:none;" id="table2">
			<tr style="height:60px;">
				<td class="table-left"><font color="red">*</font> 新密码：</td>
				<td class="table-middle">
					<input type="password"  class="txt sm" id="pword" placeholder="请您输入新密码"/>
				</td>
				<td class="table-right">
					<span class="check-fail" id="user-pword-ex"></span>
				</td>
			</tr>
			<tr style="height:60px;">
				<td class="table-left"><font color="red">*</font> 确认密码：</td>
				<td class="table-middle">
					<input type="password"  class="txt sm" id="confirmpword" placeholder="请您输入确认密码"/>
					
				</td>
				<td class="table-right">
					<span class="check-fail" id="user-confirmpword-ex"></span>
				</td>
			</tr>
			<tr style="height:60px;">
				<td class="table-left"></td>
				<td class="table-middle">
					<a class="loginBtn" id="loginBtn" style="display:none;">保&nbsp;存</a>
				</td>
				<td class="table-right">
					<span class="check-fail"></span>
				</td>
			</tr>
		</table>
	</div>
	<div class="footer">
		<img style="vertical-align:middle;" src="img/login/logo4.png" width="53px" height="27px">&nbsp;&nbsp;Copyright © 2015 北京国斗星导航技术有限公司 All Rgiht Reserved
	</div>
  </div>
 </body>
</html>